<template>
  <div>
    <el-row>
      <span id="title"><b>药店管理</b></span>
    </el-row>
    <el-row>
      <div id="shaixuan_1">&nbsp;
        <i class="iconfont icon-shaixuan"></i>
        <span slot="title">筛选</span>
      </div>
    </el-row>
    <el-row type="flex"
            align="middle"
            justify="space-around"
            id="shaixuan_2">
      <el-col :span="3">
        <font>标题或关键字：</font>
      </el-col>
      <el-col :span="4">
        <el-input v-model="selectConditons.drugstoreName"
                  placeholder="输入标题或关键字"></el-input>
      </el-col>
      <el-col :span="9">
        <ProvinceCity @selectChange="selectChange"></ProvinceCity>
      </el-col>
      <el-col :span="4"
              :offset="4">
        <el-button type="primary"
                   @click="conditionFilter">筛选</el-button>
      </el-col>
    </el-row>
    <el-row type="flex"
            align="middle"
            id="data_1">
      <el-col :span="6">
        <i class="iconfont icon-querylist"></i>
        <span>药店列表</span>
      </el-col>
      <el-col :span="6"
              :offset="12">
        <el-button type="primary"
                   @click="addDrugstoreDiglogVisble=true">新增药店</el-button>
      </el-col>
    </el-row>
    <el-row>
      <Drugstore-data ref="child"></Drugstore-data>
    </el-row>
    <!-- 新增药店对话框 -->
    <el-dialog title="新增药店"
               :visible.sync="addDrugstoreDiglogVisble">
      <el-form :model="form"
               ref="addDrugstoreform"
               :rules="rules">
        <el-form-item label="药店名称:"
                      :label-width="formLabelWidth">
          <el-input v-model="form.drugstoreName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="列表图:"
                      :label-width="formLabelWidth">
          <el-upload class="avatar-uploader"
                     action="http://localhost:9527/drugstore/file/upload"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="drugstoreImageUrl"
                 :src="drugstoreImageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否推荐:"
                      :label-width="formLabelWidth">
          <el-radio v-model="form.recommend"
                    :label="true">是</el-radio>
          <el-radio v-model="form.recommend"
                    :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="所在地区:"
                      :label-width="formLabelWidth">
          <ProvinceCity @selectChange="selectChangeForAdd"></ProvinceCity>
        </el-form-item>
        <el-form-item label="详细地址:"
                      :label-width="formLabelWidth">
          <el-input v-model="form.detailAddr"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药店电话:"
                      :label-width="formLabelWidth">
          <el-input v-model="form.telPhone"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药店介绍"
                      :label-width="formLabelWidth">
          <el-input v-model="form.description"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="confirmToAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ProvinceCity from './provinceCity.vue'
import DrugstoreData from './drugstoreData.vue'

export default {
  name: 'drugstore',
  data () {
    return {
      addDrugstoreDiglogVisble: false,
      selectConditons: {
        drugstoreName: '',
        province: '',
        city: ''
      },
      form: {
        drugstoreName: '', //药店名称
        image: '', //图片位置
        uploader: 'sezer', //上传人
        recommend: false, //是否推荐
        province: '', //所在省份
        city: '', //所在城市
        detailAddr: '',//详细地址
        telPhone: '', //电话
        description: '' //简介 描述
      },
      drugstoreImageUrl: '',
      formLabelWidth: '120px',
      rules: {
        drugstoreName: [{ required: true, message: '请输入接收人', trigger: 'blur' }],
      }
    }
  },

  watch: {
    selectConditons: {
      handler (newValue, oldValue) {
        this.$refs.child.updateCondition(newValue)
      },
      deep: true
    }
  },
  methods: {
    confirmToAdd () {
      this.$axios.post("/drugstore/addDrugstores", this.form).then(res => {
        if (res.data.code === 200) {
          this.$refs.child.updateTableData()
          this.$message({
            message: '新增',
            type: 'success'
          });
        }
        else {
          this.$message.error('新增失败');
        }
      })
      this.$refs.addDrugstoreform.resetFields();
      this.addDrugstoreDiglogVisble = false
    },
    //上传成功时回调函数
    handleAvatarSuccess (res, file) {
      if (!res) {
        this.$message.error('上传失败，请重新上传');
      }
      this.form.image = res;
      this.drugstoreImageUrl = URL.createObjectURL(file.raw);
    },
    //上传之前的检查
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    selectChange (province, city) {
      this.selectConditons.province = province
      this.selectConditons.city = city
    },
    selectChangeForAdd (province, city) {
      this.form.province = province
      this.form.city = city
    },
    conditionFilter () {
      this.$refs.child.updateTableData()
    }

  },
  components: {
    DrugstoreData,
    ProvinceCity
  },
}
</script>
<style scoped>
#title {
  font-size: 30px;
}
#shaixuan_1 {
  /* border: 1px solid red; */

  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  height: 100px;
}
#data_1 {
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  background-color: rgb(241, 241, 241);
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>